<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="../../css/elementUI.css" />
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app" ref="v">
    <!-- 表格数据 -->
    <el-table
            :data="Advertisements"
            border
            show-header
            highlight-current-row
            align="center"
            style="width: 100%; margin-top:40px; min-height:340px">
        <el-table-column
                label="广告编号" width="80">
            <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="广告图片"
                width="125">
            <template slot-scope="scope">
                <div class="demo-image__preview">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.head"
                    >
                    </el-image>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="在线图片链接">
            <template slot-scope="scope">
                <!--创建一个可点击的链接-->
                <el-link :href="scope.row.www" target="_blank" type="primary">{{ scope.row.www }}</el-link>
            </template>
        </el-table-column>
        <el-table-column
                label="广告描述">
            <template slot-scope="scope">
                <span>{{ scope.row.description }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="点击次数" width="80">
            <template slot-scope="scope">
                <span>{{ scope.row.clickCount }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="关闭次数">
            <template slot-scope="scope">
                <span>{{ scope.row.closingCount }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="创建时间">
            <template slot-scope="scope">
                <span>{{ scope.row.createdTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="开始时间">
            <template slot-scope="scope">
                <span>{{ scope.row.beginTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="更新时间">
            <template slot-scope="scope">
                <span>{{ scope.row.updatedTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态" width="80">
            <template slot-scope="scope">
                <span>{{ scope.row.status == 1 ? "启用" : scope.row.status == 0 ? "等待" : "已过期"}}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="216">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="set(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        @click="add(scope.$index, scope.row)">添加</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="Delete(scope.$index, scope.row)" v-if="scope.row.status==1">禁用</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="Delete(scope.$index, scope.row)" v-if="scope.row.status==0">启用</el-button> </template>
        </el-table-column>
    </el-table>

    </el-card>

    <el-dialog title="编辑广告信息" :visible.sync="update" @close="cancelUpdate">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户id">
                <el-input
                        placeholder="请输入内容"
                        v-model="updateAdv.id"
                        :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="用户链接">
                <el-input v-model="updateAdv.www" placeholder="链接地址"></el-input>
            </el-form-item>

            <el-form-item label="描述">
                <el-input
                        type="textarea"
                        autosize
                        placeholder="描述"
                        v-model="updateAdv.description">
                </el-input>
            </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="头像">
                <div class="demo-image__preview">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="imageSrc"
                    >
                    </el-image>
                </div>
            </el-form-item>
            <el-form-item>
                <input type="file" name="pic" @change="getFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelUpdate">取 消</el-button>
            <el-button type="primary" @click="updateAdminInfo">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="添加广告" :visible.sync="addAdr" @close="canceladdUser">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="广告链接">
                <el-input v-model="addadr.www" placeholder="广告链接"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input
                        type="textarea"
                        autosize
                        placeholder="描述"
                        v-model="addadr.description">
                </el-input>
            </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="广告图片">
                <div class="demo-image__preview">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="addSrc"
                    >
                    </el-image>
                </div>
            </el-form-item>
            <el-form-item>
                <input type="file" name="pic" @change="addFile($event)" accept="image/gif, image/jpeg, image/jpg, image/png">
            </el-form-item>
            <el-form-item label="广告定位">
                <el-radio-group v-model="addadr.position">
                    <el-radio label="浮动"></el-radio>
                    <el-radio label="固定"></el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="canceladdUser">取 消</el-button>
            <el-button type="primary" @click="addAddrInfo">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/elementUI.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            head:'',
            // 存储转换后的 URL
            imageSrc: '',
            userInfo:{
                uname:'',
                email:'',
                status:''
            },
            Advertisements:[],
            users:[],
            update:false,
            addAdr:false,
            addadr:[],
            updateAdv:[],
            addSrc:''
        },
        mounted(){
            this.selectAdvertisement();
        },
        methods: {
            addFile(obj){
                console.log(obj.target.files[0]);
                this.addadr.image = obj.target.files[0] ;
                // @click.prevent 抑制默认行为
                let formData = new FormData();
                let head=this.addadr.image;
                formData.append("head",head);
                axios.post("../../advertisement/addupload", formData).then(res=>{
                    if(res.data.code==200){
                        this.addSrc=this.blobToUrl(res.data.data);
                    }else{
                        this.$message.error('上传头像图片出错！');
                    }
                });
            },
            blobToUrl(data) {
                // let temp = new Blob([data]);   // 返回的文件流数据
                // let url = window.URL.createObjectURL(temp);  // 将他转化为路径
                // console.log(url);
                var url='data:image/png;base64,' + data
                return url;
            },
            canceladdUser(){
                this.addAdr = false;
                this.addSrc = '';
            },
            cancelUpdate(){
                this.update = false;
                this.head = '';
            },
            getFile(obj){
                console.log(obj.target.files[0]);
                this.head = URL.createObjectURL(obj.target.files[0]);
                this.updateAdv.head = obj.target.files[0] ;

                if(this.updateAdv){
                    this.head = URL.createObjectURL(obj.target.files[0]);
                    this.updateAdv.head = obj.target.files[0] ;
                }
                // @click.prevent 抑制默认行为
                let formData = new FormData();
                let head=this.updateAdv.head;
                formData.append("head",head);
                axios.post("../../advertisement/upload", formData).then(res=>{
                    if(res.data.code==200){
                        this.imageSrc=this.blobToUrl(res.data.data);
                    }else{
                        this.$message.error('上传头像图片出错！');
                    }
                });
            },
            selectAdvertisement(){
                axios.get("../../advertisement/selectAdvertisement"
                ).then(resp=>{
                    this.Advertisements = resp.data;
                    this.Advertisements.forEach(advertisement => {
                        advertisement.head=this.blobToUrl(advertisement.image);
                    });
                });
            },
            queryUserInfo(){
                axios.get("../../user/findMemberByQuery",{
                    params:this.userInfo
                }).then(resp=>{
                    console.log(resp);
                    this.users = resp.data;
                });
            },
            set(index,obj){
                this.update = true;
                this.updateAdv = obj;
                this.imageSrc=this.blobToUrl(obj.image)
            },
            Delete(index,obj){
                this.$confirm('是否进行该操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post("../../advertisement/delAdv",
                        qs.stringify(
                            {
                                id:obj.id,
                                status: obj.status
                            }
                        )
                    ).then(resp=>{
                        if(resp.data.code==200){
                            this.head = '';
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.selectAdvertisement();
                        }else{
                            this.$message("操作出错");
                        }


                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            add(index,obj){
                this.addAdr = true;
            },
            addAddrInfo(){
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }
                let formData = new FormData();
                formData.append("www",this.addadr.www);
                formData.append("description",this.addadr.description);
                formData.append("position",this.addadr.position);

                axios.post("../../advertisement/addAdrInfo",
                    formData,
                    config
                ).then(resp=>{
                    console.log(resp);
                    if(resp.data.code > 0){
                        alert("添加成功");
                        this.addAdr = false;
                        this.addSrc = '';
                        this.selectAdvertisement();
                    }else{
                        alert("输入错误信息，请重新输入！");
                    }
                });
            },
            updateAdminInfo(){
                let config = {
                    headers:{
                        'Content-Type':'multipart/form-data'
                    }
                }
                let formData = new FormData();
                formData.append("id",this.updateAdv.id);
                formData.append("www",this.updateAdv.www);
                formData.append("description",this.updateAdv.description);
                // let head=this.updateAdv.head==undefined?null:this.updateAdv.head;
                // formData.append("head",head);
                axios.post("../../advertisement/updateUserInfoAdmin",
                    formData,
                    config
                ).then(resp=>{
                    if(resp.data.code== 200){
                        alert("修改成功");
                        this.update = false;
                        this.head = '';
                        this.selectAdvertisement();
                    }else{
                        alert("输入错误信息，请重新输入！");
                    }
                });
            }
        }
    });
</script>
</body>
</html>